<script lang="ts" setup>
	import utils from '@/utils'
	import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons-vue';
	// Import Swiper Vue.js components
	import { Swiper, SwiperSlide } from 'swiper/vue'
	// Import Swiper styles
	import 'swiper/css'

	import 'swiper/css/pagination'
	import 'swiper/css/navigation'

	import { Autoplay, Navigation } from 'swiper/modules'
	const modules = [Autoplay, Navigation]
	const productChildrenList = [
		{
			name: 'EA63',
			img: 'product/t28.png',
			radius: '624mm',
			load: '3kg',
			precision: '±0.03mm',
			wight: '13kg'
		},
		{
			name: 'EA66',
			img: 'product/t29.png',
			radius: '914mm',
			load: '6kg',
			precision: '±0.05mm',
			wight: '17.5kg'
		}, {
			name: 'EA612',
			img: 'product/t30.png',
			radius: '1304mm',
			load: '12kg',
			precision: '±0.1mm',
			wight: '33.5kg'
		}, {
			name: 'CS66-Ex',
			img: 'product/t31.png',
			radius: '624mm',
			load: '3kg',
			precision: '±0.03mm',
			wight: '13kg'
		}, {
			name: 'CS612-Ex',
			img: 'product/t32.png',
			radius: '914mm',
			load: '6kg',
			precision: '±0.05mm',
			wight: '17.5kg'
		}, {
			name: 'CS620-Ex',
			img: 'product/t33.png',
			radius: '1304mm',
			load: '12kg',
			precision: '±0.1mm',
			wight: '33.5kg'
		}
	]
	const swiperOption = {
		loop: true,
		autoplay: false,
		pagination: {
			clickable: true,
		},
		slidesPerView: 3,
		initialSlide: 1,
		navigation: {
			nextEl: '.my-swiper-button-prev',
			prevEl: '.my-swiper-button-next',
			hideOnClick: true
		}
	}
</script>

<template>
	<div class="swiper-box">
		<div class="my-swiper-button-next">
			<ArrowLeftOutlined />
		</div>
		<Swiper :space-between="30" :centered-slides="true" :rewind="true" :modules="modules" v-bind="swiperOption"
			class="mySwiper1">
			<SwiperSlide v-for="(item, index) in productChildrenList" :key="index">
				<div class="swiper-item">
					<div class="swiper-item-top">
						<img :src="utils.getImg(item.img)" class="img">
						<div class="title">
							{{ item.name }}
						</div>
					</div>
					<div class="swiper-item-bottom">
						<div class="icon-text">
							<img src="../../assets/image/product/t24.svg" class="icon">
							<div class="text">{{item.radius}}</div>
						</div>
						<div class="icon-text">
							<img src="../../assets/image/product/t25.svg" class="icon">
							<div class="text">{{item.load}}</div>
						</div>
						<div class="icon-text">
							<img src="../../assets/image/product/t26.svg" class="icon">
							<div class="text">{{item.precision}}</div>
						</div>
						<div class="icon-text">
							<img src="../../assets/image/product/t27.svg" class="icon">
							<div class="text">{{item.wight}}</div>
						</div>
					</div>
				</div>
			</SwiperSlide>
		</Swiper>
		<div class="my-swiper-button-prev">
			<ArrowRightOutlined />
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.swiper-box {
		display: flex;
		align-items: center;
		padding: 0px 150px;
		user-select: none;

		.my-swiper-button-next {
			flex-shrink: 0;
			cursor: pointer;
			font-size: 24px;
			border-radius: 50%;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50px;
			height: 50px;
			color: #fff;
			background-color: #EBEBED;
			transition: background-color 1s;
		}

		.my-swiper-button-prev {
			flex-shrink: 0;
			cursor: pointer;
			font-size: 24px;
			border-radius: 50%;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50px;
			height: 50px;
			color: #fff;
			background-color: #EBEBED;
			transition: background-color 1s;
		}

		.my-swiper-button-next:hover, .my-swiper-button-prev:hover {
			background-color: #1677ff;
		}

		.mySwiper1 {
			width: 1280px;
			min-width: 1000px;

			.swiper-slide {
				width: 305px;
			}

			.swiper-item {
				cursor: pointer;
				margin: 0 40px;
				display: flex;
				flex-direction: column;
				align-items: center;

				.swiper-item-top {
					.title {
						font-size: 30px;
						font-weight: bold;
						text-align: center;
					}

					.img {
						width: 220px;
						height: 270px;
					}
				}

				.swiper-item-bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 30px;
					width: 305px;

					.icon-text {
						display: flex;
						flex-direction: column;
						align-items: center;

						.icon {
							width: 36px;
							height: 36px;
						}

						.text {
							margin-top: 10px;
							color: #495770;
							line-height: 25px;
						}
					}
				}
			}
		}
	}


	.swiper-slide {
		font-size: 18px;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.swiper-slide img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>